﻿<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Home</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>AdminLTE 2 | Starter</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet"
          th:href="@{https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i,900,900i}"/>
    <link rel="stylesheet"
          th:href="@{https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i}"/>
    <link rel="stylesheet" th:href="@{/mall/css/main.css}"/>
</head>
<body class="animsition">
<div class="shop-layout-1" id="page">
    <div th:replace="@{/include/fore_header}::header"></div>
    <section class="sub-header shop-layout-1">
        <img class="rellax bg-overlay" th:src="@{/mall/images/sub-header/01.jpg}" alt="">
        <div class="overlay-call-to-action"></div>
        <h3 class="heading-style-3">商店</h3>
    </section>
    <div class="woocommerce-top-control wrapper">
        <section class="boxed-sm">
            <div class="container">
                <div class="row">
                    <div class="woocommerce-top-control">
                        <p class="woocommerce-result-count" th:text="'Showing '+${pages.scopeLeft}+' - '+${pages.scopeRight}+' of '+${pages.totalNum}+' results'"></p>
                            <select class="orderby select-custom-wrapper" id="orderby">
                                <option value="default" selected="selected">默认排序</option>
                                <option value="popularity">按热度排序</option>
                                <option value="price-asc">按价格排序：从低到高</option>
                                <option value="price-desc">按价格排序：从高到低</option>
                            </select>
                        <form role="form" th:action="@{/goods/shopList}" method="get" id="orderform">
                            <input type="hidden" name="orderType" id="order">
                            <input type="hidden" name="pageNum" id="pageNum">
                        </form>
                    </div>
                </div>
            </div>
        </section>
    </div>
    <section class="box-sm">
        <div class="container">
            <div class="row main">
                <div class="row product-grid-equal-height-wrapper product-equal-height-4-columns flex multi-row" >
                    <figure class="item"  th:each="goods,memberStat:${goods}">
                        <table class="dataTable">
                            <tr>
                                <td class="td_id" th:text="${goods.goodsId}"></td>
                                <td th:text="${goods.goodsName}"></td>
                                <td th:text="${goods.goodsPicture}"></td>
                                <td th:text="${goods.goodsCategory}"></td>
                                <td th:text="${goods.goodsPrice}"></td>
                                <td th:text="${goods.goodsInventory}"></td>
                                <td th:text="${goods.goodsSold}"></td>
                                <td th:text="${goods.goodsDescription}"></td>
                            </tr>
                        </table>
                        <div class="product product-style-1">
                            <div class="img-wrapper">
                                <a th:href="@{'/goods/detail?id='+${goods.goodsId}}" target="_blank">
                                    <img class="img-responsive" th:src="@{'/upload/img/'+${goods.goodsPicture}}" style="height: 218px;width: 218px" alt="product thumbnail"/>
                                </a>
                                <div class="product-control-wrapper bottom-right">
                                    <div class="wrapper-control-item">
                                        <a class="js-quick-view" href="#" type="button" data-toggle="modal"
                                           data-target="#quick-view-product" onclick="displayDetail(this)">
                                            <span class="lnr lnr-eye"></span>
                                        </a>
                                    </div>
                                    <div class="wrapper-control-item item-add-cart js-action-add-cart">
                                        <a class="animate-icon-cart" href="#">
                                            <span class="lnr lnr-cart"></span>
                                        </a>
                                        <svg x="0px" y="0px" width="36px" height="32px" viewbox="0 0 36 32">
                                            <path stroke-dasharray="19.79 19.79" fill="none" ,="," stroke-width="2"
                                                  stroke-linecap="square" stroke-miterlimit="10"
                                                  d="M9,17l3.9,3.9c0.1,0.1,0.2,0.1,0.3,0L23,11"></path>
                                        </svg>
                                    </div>
                                </div>
                            </div>
                            <figcaption class="desc text-center">
                                <h3>
                                    <a class="product-name"  th:href="@{'/goods/detail?id='+${goods.goodsId}}" th:text="${goods.goodsName}"></a>
                                </h3>
                                <span class="price2" th:text="'￥'+${goods.goodsPrice}"></span>
                            </figcaption>
                        </div>
                    </figure>
                </div>
                <div class="row">
                    <div class="col-md-12 text-right">
                        <nav>
                            <ul class="pagination pagination-style-1" th:if="${pages.totalPages ge 1}">
                                <li>
                                    <a class="prev page-numbers" id="prevPage">
                                        <i class="fa fa-angle-left"></i>
                                    </a>
                                </li>

                                <li  th:each="i:${#numbers.sequence(1,pages.totalPages)}" id="pages">
                                    <a class="page-numbers" th:href="@{'/goods/'+${method}+'?orderType='+${orderType}+'&pageNum='+${i}}" th:text="${i}">1</a>
                                </li>
                                <li>
                                    <a class="next page-numbers" href="#">
                                        <i class="fa fa-angle-right"></i>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
<div th:replace="@{/include/fore_footer}::footer"></div>
<div class="modal fade" id="quick-view-product" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg modal-quickview woocommerce" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="woocommerce-product-gallery">
                            <div class="main-carousel-product-quick-view">
                                <div class="item">
                                    <img class="img-responsive goodsPicture" th:src="@{/mall/images/product/01.jpg}" alt="product thumbnail"/>
                                </div>
                            </div>
                            <!--<div class="thumbnail-carousel-product-quickview">-->
                                <!--<div class="item">-->
                                    <!--<img class="img-responsive" th:src="@{/mall/images/product/01.jpg}" alt="product thumbnail"/>-->
                                <!--</div>-->
                            <!--</div>-->
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="summary">
                            <div class="desc">
                                <div class="header-desc">
                                    <h2 class="product-title"></h2>
                                    <p class="price">$2.00</p>
                                </div>
                                <div class="body-desc">
                                    <div class="woocommerce-product-details-short-description">
                                        <p class="goodsDescription" style="width: 419px;height: auto"></p>
                                    </div>
                                </div>
                                <div class="footer-desc">
                                    <div class="cart">
                                        <div class="quantity buttons-added">
                                            <input class="minus" value="-" type="button"/>
                                            <input id="quantity" class="input-text qty text" autocomplete="off" readonly="readonly" name="quantity" value="1"/>
                                            <input class="plus" value="+" type="button"/>
                                        </div>
                                        <div class="group-btn-control-wrapper">
                                            <button class="btn btn-brand no-radius addToCart">添加到购物车</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="product-meta">
                                <p>已售:
                                    <a href="#" rel="tag" class="sold">Food</a>
                                </p>
                                <p>类别:
                                    <a href="#" rel="tag" class="posted-in">Food</a>
                                </p>
                                <p >编号:
                                    <a href="#" class="id">A203</a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script th:src="@{/mall/js/library/jquery.min.js}"></script>
<script th:src="@{/mall/js/library/bootstrap.min.js}"></script>
<script th:src="@{/mall/js/function-check-viewport.js}"></script>
<script th:src="@{/mall/js/library/slick.min.js}"></script>
<script th:src="@{/mall/js/library/select2.full.min.js}"></script>
<script th:src="@{/mall/js/library/imagesloaded.pkgd.min.js}"></script>
<script th:src="@{/mall/js/library/jquery.mmenu.all.min.js}"></script>
<script th:src="@{/mall/js/library/rellax.min.js}"></script>
<script th:src="@{/mall/js/library/isotope.pkgd.min.js}"></script>
<script th:src="@{/mall/js/library/bootstrap-notify.min.js}"></script>
<script th:src="@{/mall/js/library/bootstrap-slider.js}"></script>
<script th:src="@{/mall/js/library/in-view.min.js}"></script>
<script th:src="@{/mall/js/library/countUp.js}"></script>
<script th:src="@{/mall/js/library/animsition.min.js}"></script>
<script th:src="@{/mall/js/global.js}"></script>
<script th:src="@{/mall/js/config-mm-menu.js}"></script>
<script th:src="@{/mall/js/config-carousel-product-quickview.js}"></script>
<script th:src="@{/mall/js/demo-add-to-cart.js}"></script>
<script th:inline="javascript">
    $(function () {
        $("#orderform").hide();
        $(".dataTable").hide();
        $(".plus").click(function () {
            var quantity=$(this).parent().find("#quantity");
            if (quantity.val()<99){
                quantity.val(parseInt(quantity.val())+1);
            }
        });
        $(".minus").click(function () {
            var quantity=$(this).parent().find("#quantity");
            if (quantity.val()>1){
                quantity.val(parseInt(quantity.val())-1);
            }
        });

        $(".addToCart").click(function () {
            var amount=$(this).parents(".cart").find("#quantity").val();
            var id=$(this).parents(".summary").find(".id").html();
            var actionAddToCart = $('.js-action-add-cart');
            var productName=$(this).parents(".summary").find(".product-title").html();
            console.info(productName);
            $.ajax({
                type: "POST",
                url: "/goods/addToCart",
                data: {id: id, amount: amount},
                dataType: "json",
                success: function (msg) {
                    if (msg["ok"]) {
                        notifyAddToCart(productName);
                        $(this).addClass('is-added');
                        setTimeout(function () {
                            actionAddToCart.removeClass('is-added');
                        }, 1000);
                    }
                }
            });
        })
        $("#orderby").bind("change",function () {
           var value=$(this).find("option:selected").attr("value");
            $("#order").val(value);
            $("#pageNum").val(1);
            $("#orderform").submit();
        });
        var orderType=[[${orderType}]];
        $("#orderby").find("option[value='"+orderType+"']").attr("selected",true);
        var pageNum=[[${pages.pageNum}]];
        $(".page-numbers:contains("+pageNum+")").css("border","1px solid green");
    });
    function displayDetail(obj) {
        $("#quantity").val(1);
        var tds=$(obj).parents(".item").children(".dataTable").find("td");
        $(".product-title").html(tds.eq(1).text());
        $(".price").html('￥'+tds.eq(4).text());
        $(".goodsDescription").html(tds.eq(7).text());
        $(".posted-in").html(tds.eq(3).text());
        $(".sold").html(tds.eq(6).text());
        $(".id").html(tds.eq(0).text());
        var img=$(obj).parents(".img-wrapper").find(".img-responsive");
        $(".goodsPicture").attr("src",img.attr("src"));
    };
    function notifyAddToCart(productName) {
        $.notify({
            title: productName,
            icon: 'lnr lnr-cart',
            message: "is added to card"
        }, {
            type: 'success',
            animate: {
                enter: 'animated fadeInUp',
                exit: 'animated fadeOut'
            },
            placement: {
                from: "bottom",
                align: "right"
            },
            offset: 20,
            spacing: 10,
            z_index: 1031,
        });
    };
</script>
</body>
</html>

